﻿@model DiffModel
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <style>
      head, body {
        margin: 0;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        font-family: Menlo,Consolas,monospace;
        font-size: @(Model.FontSize)px;
      }

      td {
        height: 20px;
        line-height: 20px;
      }

      .content {
        white-space: nowrap;
        padding: 0 10px;
        border-left: 1px solid #eee;
      }

      .code-line {
        display: inline;
        background: 0 0;
        padding: 0;
        word-wrap: normal;
        white-space: pre;
      }

      .line-prefix {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;

        display: inline;
        background: 0 0;
        padding: 0;
        word-wrap: normal;
        white-space: pre;
      }

      tr.insert > td {
        background-color: #dfd;
        border-color: #b4e2b4;
      }

      tr.delete > td {
        background-color: #fee8e9;
        border-color: #e9aeae;
      }

      tr.info > td {
        background-color: #f8fafd;
        color: rgba(0,0,0,.3);
        border-color: #d5e4f2;
      }

      .line-number {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        width: 40px;
        color: rgba(0,0,0,.3);
        text-align: right;
        cursor: pointer;
        padding: 0 10px 0 0;
      }

      .comment > td {
        padding: 5px;
        border-top: 1px solid #d5e4f2;
        border-bottom: 1px solid #d5e4f2;
      }

      .comment-inner {
        border: 1px solid #d5e4f2;
        border-radius: 2px;
      }

      .reply-line {
        border-top: 1px solid #d5e4f2;
        padding: 0;
      }

      .reply-line button {
        width: 100%;
        background: #f6f8fa;
        height: 32px;
        border: none;
        font-weight: 700;
      }

      .reply-line button:active {
        background: #e6e8eb;
        border: 1px solid #c4c4c4;
      }

      img.avatar {
        margin-top: 4px;
        border-radius: 2px;
        float: left;
      }

      .comment-content {
        margin-left: 44px;
      }

      .comment-line {
        padding: 8px 8px
      }

      .comment-content h4 {
        display: inline !important;
        margin-top: 0;
        margin-bottom: 0;
        font-weight: 400;
      }

      .text-gray {
        color: #586069 !important
      }

      .comment-body {
        width: 100%;
        padding: 0;
        overflow: visible;
      }
      .comment-body > :first-child {
        margin-top: 0 !important;
      }
			.comment-body > :last-child {
  			margin-bottom: 0 !important;
			}
      .comment-body h1,
      .comment-body h2,
      .comment-body h3,
      .comment-body h4,
      .comment-body h5,
      .comment-body h6 {
        margin: 1em 0 15px;
        padding: 0;
        font-weight: bold;
        line-height: 1.7;
        cursor: text;
        position: relative;
      }
      .comment-body h1 {
        font-size: 1.8em;
        border-bottom: 1px solid #ddd;
      }
      .comment-body p,
      .comment-body blockquote,
      .comment-body ul,
      .comment-body ol,
      .comment-body dl,
      .comment-body table,
      .comment-body pre {
        margin: 15px 0;
      }
      .comment-body h2 {
        font-size: 1.4em;
        border-bottom: 1px solid #eee;
      }
      .comment-body ul,
      .comment-body ol {
        padding-left: 20px;
      }
      .comment-body a {
        color: #4183c4;
        text-decoration: none;
        text-decoration: none;
      }
      .comment-body .highlight pre,
      .comment-body pre {
        background-color: #f8f8f8;
        border: 1px solid #ddd;
        line-height: 19px;
        overflow: auto;
        padding: 6px 10px;
        border-radius: 3px;
      }
      .comment-body pre {
        word-wrap: normal;
      }
      .comment-body dl {
        padding: 0;
      }
      .comment-body dl dt {
        font-weight: bold;
        font-style: italic;
        padding: 0;
        margin-top: 15px;
      }
      .comment-body dl dd {
        margin-bottom: 15px;
        padding: 0 15px;
      }
      .comment-body table {
        width: 100%;
        overflow: auto;
        display: block;
      }
      .comment-body table tr {
        border-top: 1px solid #ccc;
        background-color: #fff;
      }
      .comment-body table tr:nth-child(2n) {
        background-color: #f8f8f8;
      }
      .comment-body table th,
      .comment-body table td {
        border: 1px solid #ddd;
        padding: 6px 13px;
      }
      .comment-body table th {
        font-weight: bold;
      }
      .comment-body img {
        max-width: 100%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      .comment-body ul.task-list > li.task-list-item {
        list-style-type: none;
      }
      .comment-body .task-list-item-checkbox {
        margin-left: -20px;
        vertical-align: middle;
      }

    </style>
	<script>
    function invokeNative(functionName, args) {
      try {
        var iframe = document.createElement('IFRAME');
        iframe.setAttribute('src', 'app://' + functionName + '#' + JSON.stringify(args));
        document.body.appendChild(iframe);
        iframe.parentNode.removeChild(iframe);
        iframe = null;  
      } catch (err) {
          alert(err.message);
      }
    }
    function lineClick(fileLine, patchLine) {
  		invokeNative("comment", { fileLine, patchLine });
  	}
  	function replyTo(id) {
  		invokeNative("reply-to", { id });
  	}
	</script>
  </head>
  <body>
    <table>
      <tbody>	
        @foreach (var chunk in Model.Chunks)
    		{
	        <tr class="info">
            <td class="line-number">...</td>
            <td class="line-number">...</td>
            <td class="content">@chunk.Content</td>
          </tr>

    		foreach (var line in chunk.Lines)
  			{
  				if (line.LineEquality == DiffModel.LineEquality.Equal)
  				{
            <tr onclick="lineClick(@line.Index, @line.NewLine)">
              <td class="line-number">@line.BaseLine</td>
              <td class="line-number">@line.NewLine</td>
              <td class="content">
                <span class="line-prefix">&nbsp;</span>
                <span class="code-line">@line.Content</span>
              </td>
            </tr>
  				}
  				else if (line.LineEquality == DiffModel.LineEquality.Insert)
          {
            <tr class="insert" onclick="lineClick(@line.Index, @line.NewLine)">
              <td class="line-number"></td>
              <td class="line-number">@line.NewLine</td>
              <td class="content">
                <span class="line-prefix">+</span>
                <span class="code-line">@line.Content</span>
              </td>
            </tr>
          }
  				else if (line.LineEquality == DiffModel.LineEquality.Delete)
          {
            <tr class="delete" onclick="lineClick(@line.Index, @line.BaseLine)">
              <td class="line-number">@line.BaseLine</td>
              <td class="line-number"></td>
              <td class="content">
                <span class="line-prefix">-</span>
                <span class="code-line">@line.Content</span>
              </td>
            </tr>
          }

  				foreach (var commentSet in line.CommentSets)
  				{
  		      <tr class="comment">
              <td colspan="3">
                <div class="comment-inner">
                  @foreach (var comment in commentSet.Value)
                  {
                    <div class="comment-line">
                      <img src="@comment.AvatarUrl" class="avatar" width="28" height="28" />
                      <div class="comment-content">
                        <h4><strong>@comment.Username</strong> <span class="text-gray">@comment.Date</span></h4>
                        <div class="comment-body">
          								@{WriteLiteral(comment.Body);}
                        </div>
                      </div>
                    </div>
  				        }
                  <div class="reply-line">
                    <button onclick="replyTo(@commentSet.Key)">Reply</button>
                  </div>
                </div>
              </td>
            </tr>
  				}
  			}
  		}
      </tbody>
    </table>
  </body>
</html>